<template>
	<PageLayout title="火情直击">
		<view
			style="height: 100%;padding: 20px;display: flex;flex-direction: column;justify-content: start;align-items: center;overflow-y: scroll;">
			<view v-for="fireDescription in [...fireDescriptions].reverse()" :key="fireDescription.fireId" 
			@click.stop="clickCard(fireDescription.fireId,fireDescription.videoPath,fireDescription.fireLevel,fireDescription.latitude,fireDescription.longitude,fireDescription.recordTime,fireDescription.droneId,fireDescription.routeName)"
				style="width: calc(100% - 40px);height: 100px;border-radius: 20px;background-color: #ffffff;margin-bottom: 20px;display: flex;flex-direction: row;align-items: start;color: #707070;padding: 20px;">
				<view style="display: flex;flex-direction: column;justify-content: space-evenly;font-size: 14px;width: 30%;">
					<text>编号：{{fireDescription.fireId}}</text>
					<text>级别：</text>
					<text :style="{ fontSize: '16px', color: fireLevelColor(fireDescription.fireLevel) }">{{translateFireLevel(fireDescription.fireLevel)}}</text>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: space-evenly;font-size: 14px;width: 70%;">
					<text>
						由{{fireDescription.droneId}}号无人机在{{fireDescription.routeName}}记录
					</text>
					<text>记录时间：</text>
					<text style="color: #000000;">{{formatDateTime(fireDescription.recordTime)}}</text>
				</view>

			</view>
		</view>
	</PageLayout>
</template>

<script setup>
	import PageLayout from "/pages/PageLayout/PageLayout.vue";
	import {
		navigateToControl,
		navigateTodroneAction,
		fetchActiveRouteNameAndIdList,
		fetchDroneIdList
	} from "/utils/Utils";
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from "vue";
	import {
		fireHandleRecord,
		getFireDescription,
		getFireDescriptions
	} from "/utils/HttpUtils";

	const formatDateTime = (dateString) => {
		const date = new Date(dateString);

		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');

		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	};

const fireLevelColor = (fireLevel) => {
  switch (fireLevel) {
    case 'unprocessed':
      return '#ff4242'; 
    case 'misjudgment':
      return '#8b8b8b'; 
    case 'insignificant':
      return '#8b8b8b';
    case 'security_required':
      return '#ff4242'; 
    default:
      return '#ff0000'; 
  };
};

	const translateFireLevel = (fireLevel) => {
		if (fireLevel === "unprocessed") {
			return "待查看";
		}
		if (fireLevel === "misjudgment") {
			return "误判";
		}
		if (fireLevel === "insignificant") {
			return "微小火焰";
		}
		if (fireLevel === "security_required") {
			return "立即处理";
		}
		if (fireLevel === "leader_approval") {
			return "隔离上报";
		}
	};

const clickCard = (fireId,videoPath,fireLevel,latitude,longitude,recordTime,droneId,routeName) => {
	getApp().globalData.fire_video_info={
		"fireId":fireId,
		"videoPath":videoPath,
		"fireLevel":fireLevel,
		"latitude":latitude,
		"longitude":longitude,
		"recordTime":recordTime,
		"droneId":droneId,
		"routeName":routeName
	};
	// console.log(getApp().globalData.fire_video_info);
	uni.navigateTo({
		url: '/pages/videoDetails/videoDetails'
	});
}

	const fireDescriptions = ref([]);
	const timer = ref(null);
	onMounted(() => {
		timer.value = setInterval(async () => {
			fireDescriptions.value = await getFireDescriptions();
			let i=0;
			for(i=0;i<fireDescriptions.value.length;i++){
				if (fireDescriptions.value[i].droneId == null) {
				  fireDescriptions.value[i].droneId = 1;
				}
				if (fireDescriptions.value[i].routeName == null) {
				  fireDescriptions.value[i].routeName = "天台";
				}
			}


			// console.log(routes.value);
		}, 1000);
	});

	onUnmounted(() => {
		if (timer.value) clearInterval(timer.value);
	});
</script>

<style lang="scss" scoped>

</style>